import React, { ReactNode } from 'react'
import { Jumbotron } from 'src/components/jumbotron'
import { PageContainer } from 'src/components/pageContainer'
import { RaceFilterForm } from 'src/components/searchFilter/RaceFilter'
import { ExplorePageNav } from 'src/components/nav/ExplorePageNav'
import { PageFooter } from 'src/components/pageFooter'
import { Route } from 'react-router'
import { RacePageResult } from './subPages/racePage'
import { ProjectResultPage } from './subPages/projectPage'
import { ProjectFilterForm } from 'src/components/searchFilter/ProjectFilter'
import { TeamResultPage } from './subPages/teamPage'
import { TeamFilterForm } from 'src/components/searchFilter/TeamFilter'
import QueueAnim from 'rc-queue-anim'

interface RacePageProp {

}

interface RacePageState {

}

export class ExplorePage extends React.Component<RacePageProp, RacePageState> {
    getSearchResult = (): ReactNode => {
        return (
            <div>
                <QueueAnim animConfig={[
                    { opacity: [1, 0], translateX: [0, 500] },
                    { opacity: [1, 0], translateX: [0, -500] }
                ]} leaveReverse>
                    <Route exact path={'/explore/race'} key={'race'}>
                        <RacePageResult/>
                    </Route>
                    <Route exact path={'/explore/project'} key={'project'}>
                        <ProjectResultPage/>
                    </Route>
                    <Route exact path={'/explore/community'} key={'community'}>
                        <TeamResultPage/>
                    </Route>
                </QueueAnim>
            </div>
        )
    }

    render (): ReactNode {
        return (
            <div>
                <Jumbotron title="发现" subTitle="竞赛 | 项目 | 队伍"/>
                <PageContainer shadow={true} header={<ExplorePageNav/>}>
                    <Route exact path={'/explore/race'}>
                        <RaceFilterForm/>
                    </Route>
                    <Route exact path={'/explore/project'}>
                        <ProjectFilterForm/>
                    </Route>
                    <Route exact path={'/explore/community'}>
                        <TeamFilterForm/>
                    </Route>
                </PageContainer>
                <PageContainer shadow={false} style={({
                    padding: '0'
                })} header={this.getSearchResult()}>
                </PageContainer>
                <PageFooter/>
            </div>
        )
    }
}

export default ExplorePage
